<template>
<!-- 管理页面主页面 -->
  <div class="massif-details">
    <el-card body-style="padding:0px;margin:0px">
      <div class="flex-wrap">
        <div class="flex-wrap go-back" @click="handleClickBack">
          <img :src="backImg"/>
          <span style="margin-left: 10px">返回</span>
        </div>
        <div style="color:#00955b;font-weight:bolder;margin-left: 20px">地块详情</div>
      </div>
    </el-card>
    <div class="massif-box">
      <!-- 地块详情 -->
      <detailsItem :listParames="listParames"></detailsItem>
    </div>
    <!-- 分页导航 -->
    <div class="tabs-box">
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true" class="custom-tabs-box">
        <el-tab-pane
          v-for="item in mainTabs"
          :key="item.name"
          :label="item.text"
          :name="item.name"
        >
				<!-- 地块详情导航对应的详情 -->
          <component :is="item.con"></component>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import detailsItem from "./details-item";
import Corn from "./Planting-plan/Corn";
import Cotton from "./Planting-plan/cotton";
import Rice from "./Planting-plan/rice";
import plantHistory from "./Planting-plan/plant-history.vue";
import Inspection from "./Planting-plan/Inspection.vue";
import planPage from "./Planting-plan/plan-page.vue";
import plandList from "./Planting-plan/pland-list.vue";
import task from "./Planting-plan/task"
import iot from "./Planting-plan/iot";
import putInto from "./Planting-plan/put-into.vue";
export default {
  props: {
    listParames: {
      type: Object
    }
  },
  components: {
    detailsItem,
    Cotton,
    Corn,
    Rice,
    planPage,
    plantHistory,
    Inspection,
    plandList,
	putInto
  },
  data() {
    return {
        detailInfo : null,
      activeName: "zzfa",
        backImg: require("@/assets/img/farm/goback.png"),
      mainTabs: [
        { text: "种植方案", name: "zzfa", con: planPage },
        { text: "农事任务", name: "nsrw", con: task },
        { text: "投入明细", name: "trmx", con: putInto },
        { text: "物联网设备", name: "sb", con: iot },
        { text: "巡感监测", name: "xgjc", con: "" },
        { text: "病虫害预警", name: "ch", con: "" },
        { text: "气象信息", name: "qxxx", con: "" },
        { text: "种植历史", name: "zzls", con: plantHistory },
        { text: "巡田记录", name: "xtjl", con: Inspection }
      ]
    };
  },
  mounted() {
    localStorage.setItem("listParames", JSON.stringify(this.listParames));
  },
  methods: {
      setDetailInfo(info){
          this.detailInfo = info
          sessionStorage.setItem("massifDetails", JSON.stringify(this.detailInfo))
      },
    handleClick(tab, event) {
      // console.log(tab, event);
      // console.log(tab,event); /// 获得唯一的index
    },
      handleClickBack() {
          this.$emit("changePage", 1)
      }
  }
};
</script>

<style scoped>
.massif-box {
  background-color: #fff;
  margin: 15px;
  padding: 15px;
}
.tabs-box {
  background-color: #fff;
  margin: 15px;
  padding: 15px;
}
.flex-wrap {
  display: flex;
  align-items: center;
}

.go-back {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  width: 80px;
  background: #f1faf7;
}
  .custom-tabs-box >>> .el-tabs__nav{
    display: flex;
    flex: 1;
    text-align: center;
    width: 100% !important;
  }
 .custom-tabs-box >>> .el-tabs__item{
    flex: 1;
  }
</style>
